<template>
  <div class="content-box background_box">
    <headback class="border_bottom" :title="t('myStar')"></headback>
    <div class="content-wrap topHead nearbyShop">
      <van-tabs v-model:active="active" title-inactive-color="#a2a2a2" @click-tab="changeTab"
        :title-active-color="store.state.themeColor">
        <van-tab :title="t('shop')">
          <div class="tab_warpper">
            <van-list v-model:loading="loading" :finished="finished" :finished-text="t('noMore')" @load="onLoad">
              <shopItem isCollect @refresh="refreshList(0)" star v-for="(item, index) in shopListData" :key="item.KeeperAddr + index" :shopInfo="item">
              </shopItem>
            </van-list>
          </div>
          </van-tab>
          <van-tab :title="t('user')">
          <div class="tab_warpper">
            <van-list v-model:loading="loading2" :finished="finished2" :finished-text="t('noMore')" @load="onLoad2">
              <userItem isCollect @refresh="refreshList(0)" star v-for="(item, index) in userListData" :key="item.KeeperAddr + index" :shopInfo="item">
              </userItem>
            </van-list>
          </div>
          </van-tab>
          </van-tabs>

    </div>
  </div>
</template>
<script setup>
import shopItem from "../admin/components/shopItem.vue";
import userItem from "../admin/components/userItem.vue";
import { useStore } from "vuex";
import { ref, onMounted, computed, reactive, watch } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const store = useStore();
const shopListData = ref([])
const shopList = ref() // 创建 ref，并将其初始值设为 store 中的值
const userListData = ref([])
const userList = ref() // 创建 ref，并将其初始值设为 store 中的值
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const loading2 = ref(false);
const finished2 = ref(false);
const refreshing2 = ref(false);
let params = reactive({
  end: 19,
  start: 0,
});
let params2 = reactive({
  end: 19,
  start: 0,
});
const onLoad = async () => {
  if (refreshing.value) {
    shopListData.value = [];
    params.start = 0;
    params.end = 19
    refreshing.value = false;
  }
  try {
    loading.value = true;
    let data = shopList.value.slice(params.start, params.end + 1)
    data.forEach(obj => {
      shopListData.value.push(obj)
    })
    loading.value = false;
    if (data.length == 20) {
      params.end = params.end + 20
      params.start = params.start + 20
    } else {
      finished.value = true;
    }
  } catch (err) {
    loading.value = false;
    finished.value = true;
  }
};
const onRefresh = () => {
  // 清空列表数据
  finished.value = false;
  refreshing.value = true;
  params.start = 0;
  params.end = 19
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true;
  try {
    onLoad();
  } catch (err) {
    shopList.value = []
    shopListTem = []
  }
};
const onLoad2 = async () => {
  if (refreshing2.value) {
    userListData.value = [];
    params2.start = 0;
    params2.end = 19
    refreshing2.value = false;
  }
  try {
    loading2.value = true;
    let data = userList.value.slice(params2.start, params2.end + 1)
    data.forEach(obj => {
      userListData.value.push(obj)
    })
    loading2.value = false;
    if (data.length == 20) {
      params2.end = params2.end + 20
      params2.start = params2.start + 20
    } else {
      finished2.value = true;
    }
  } catch (err) {
    loading2.value = false;
    finished2.value = true;
  }
};
const onRefresh2 = () => {
  // 清空列表数据
  finished2.value = false;
  refreshing2.value = true;
  params2.start = 0;
  params2.end = 19
  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading2.value = true;
  try {
    onLoad2();
  } catch (err) {
    userList.value = []
    userListTem = []
  }
};
const getDataValue = () => {
  shopList.value = store.state.collectShop
  userList.value = store.state.collectUser
}
const refreshList = (value)=>{
  getDataValue()
  onRefresh()
  onRefresh2()
}
getDataValue()
</script>

<style lang="scss" scoped>
.content-box {
  position: relative;
  .content-wrap {
    padding: 8px;
    border-radius: 8px;

    :deep .van-tabs__wrap {
      height: 34px;
    }

    :deep .van-tab {
      font-size: 12px;
    }

    :deep .van-tabs__nav {
      border-radius: 10px 10px 0 0;
      padding: 2px;
      height: 32px;
    }

    .tab_warpper {
      margin-top: 8px;
      min-height: 200px;
      border-radius: 8px;
    }

    :deep .van-tabs__nav .van-tabs__line {
      border-radius: 5px;
      bottom: 5px;
      width: 16px;
      background: $primary-color;
    }

    .tab_warpper {
      min-height: 400px;

    }
  }
}
</style>
